<template>
  <div class="competition bg-white p-3">
    <div class="nav jc-between">
      <div
        class="nav-item"
        :class="{ active: active === i }"
        v-for="(category, i) in newsData"
        :key="i"
        style="width:15%"
        @click="$refs.list.swiper.slideTo(i)"
      >
        <div class="nav-link">{{ category.name }}</div>
      </div>
    </div>

    <!-- body-内容 -->
    <div class="pt-3">
      <!-- :options="{autoHeight: true}" 控制自动高度 -->
      <swiper
        :options="{ autoHeight: true }"
        ref="list"
        @click="()=>console.log($refs.list.swiper.realIndex)"
        @slide-change="() => (active = $refs.list.swiper.realIndex)"
      >
        <swiper-slide v-for="(category, i) in newsData" :key="i">
          <div class="mb-3">
            <div class="d-flex ai-center mb-3">
              <h1 class="text-blue fs-xl">{{category.name}}</h1>
              <span class="text-grey fs-sm ml-3 px-1 title">官方举办</span>
            </div>
            <img class="w-100" style="" src="../../assets/images/lbt1.jpg" />
          </div>
          <router-link
            tag="div"
            :to="`/articles/${news._id}`"
            class="py-2 fs-lg d-flex"
            v-for="(news, i) in category.newsList"
            :key="i"
          >
            <span class="flex-1 text-dark-1 text-ellipse pr-2">{{
              news.title
            }}</span>
            <span class="text-grey-1 fs-sm">{{ news.createdAt | date }}</span>
          </router-link>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  // 过滤器
  filters: {
    // 时间过滤
    date(val) {
      return dayjs(val).format("MM/DD");
    },
  },
  data() {
    return {
      active: 0,
      // 新闻数据
      newsData: [],
      isShow: false,
    };
  },
  created() {
    this.fetchNewsData();
  },
  methods: {
    async fetchNewsData() {
      const res = await this.$http.get("competition/list");
      this.newsData = res.data;
    },
  },
};
</script>

<style lang="scss">
@import "../../assets/scss/_variable.scss";
.title {
  border-radius: 10px;
  border: 1px solid map-get($colors, "grey-1");
}
</style>
